<template>
    <view :class="[themeName,model.theme.box.class]" :style="model.theme.box.style" class="wy-form-easy wy-form">
        <slot name="header"></slot>  
        <wy-form :isEasy="true" :themeName="themeName" :screenSize="ScreenSize" v-if="autoInit||inited" @doValid="doValid" @mounted="_formMounted" ref="wyForm" :dataSource="model.form" @submit="toSubmit">  
            <view :class="[model.theme.group.class]" :style="model.theme.group.style" v-for="(group,index) in inputList" :key="index">
            	<wy-form-group-easy :customComponents="model.components" :themeName="themeName" :screenSize="ScreenSize" @slots="slots" :dataSource="group" >
                    <!-- #ifdef VUE3 -->  
                    <template v-if="slotList.includes('slot1')" #slot1><slot  name="slot1"></slot></template> 
                    <template v-if="slotList.includes('slot2')" #slot2><slot  name="slot2"></slot></template> 
                    <template v-if="slotList.includes('slot3')" #slot3><slot  name="slot3"></slot></template>
                    <template v-if="slotList.includes('slot4')" #slot4><slot  name="slot4"></slot></template>
                    <template v-if="slotList.includes('slot5')" #slot5><slot  name="slot5"></slot></template>
                    <template v-if="slotList.includes('slot6')" #slot6><slot  name="slot6"></slot></template>
                    <template v-if="slotList.includes('slot7')" #slot7><slot  name="slot7"></slot></template>
                    <template v-if="slotList.includes('slot8')" #slot8><slot  name="slot8"></slot></template>
                    <template v-if="slotList.includes('slot9')" #slot9><slot  name="slo9"></slot></template>
                    <template v-if="slotList.includes('slot10')" #slot10><slot  name="slot10"></slot></template>
                    <template v-if="slotList.includes('slot11')" #slot11><slot  name="slot11"></slot></template>
                    <template v-if="slotList.includes('slot12')" #slot12><slot  name="slot12"></slot></template>
                    <template v-if="slotList.includes('slot13')" #slot13><slot  name="slot13"></slot></template>
                    <template v-if="slotList.includes('slot14')" #slot14><slot  name="slot14"></slot></template>
                    <template v-if="slotList.includes('slot15')" #slot15><slot  name="slot15"></slot></template>
                    <template v-if="slotList.includes('slot16')" #slot16><slot  name="slot16"></slot></template>
                    <template v-if="slotList.includes('slot17')" #slot17><slot  name="slot17"></slot></template>
                    <template v-if="slotList.includes('slot18')" #slot18><slot  name="slot18"></slot></template>
                    <template v-if="slotList.includes('slot19')" #slot19><slot  name="slot19"></slot></template>
                    <template v-if="slotList.includes('slot20')" #slot20><slot  name="slot20"></slot></template>
                    <!--
                    <template v-for="(s,i) in slotList" :key="i"> 
                        <view v-if="s=='slot1'" :class="[model.theme.slot.class]" :style="model.theme.slot.style" v-slot:slot1>
                            <slot  name="slot1"></slot>
                        </view> 
                        <view v-else :class="[model.theme.slot.class]" :style="model.theme.slot.style" v-slot:[s]>
                            <slot :name="s"></slot>
                        </view>  
                    </template> 
                    -->
                    <!-- #endif -->
                    <!-- #ifndef VUE3 -->
                    <template  v-for="(s,i) in slotList">
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot1" :key="i" v-if="s=='slot1'"><slot name="slot1"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot2" :key="i" v-else-if="s=='slot2'"><slot name="slot2"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot3" :key="i" v-else-if="s=='slot3'"><slot name="slot3"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot4" :key="i" v-else-if="s=='slot4'"><slot name="slot4"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot5" :key="i" v-else-if="s=='slot5'"><slot name="slot5"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot6" :key="i" v-else-if="s=='slot6'"><slot name="slot6"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot7" :key="i" v-else-if="s=='slot7'"><slot name="slot7"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot8" :key="i" v-else-if="s=='slot8'"><slot name="slot8"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot9" :key="i" v-else-if="s=='slot9'"><slot name="slot9"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot10" :key="i" v-else-if="s=='slot10'"><slot name="slot10"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot11" :key="i" v-else-if="s=='slot11'"><slot name="slot11"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot12" :key="i" v-else-if="s=='slot12'"><slot name="slot12"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot13" :key="i" v-else-if="s=='slot13'"><slot name="slot13"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot14" :key="i" v-else-if="s=='slot14'"><slot name="slot14"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot15" :key="i" v-else-if="s=='slot15'"><slot name="slot15"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot16" :key="i" v-else-if="s=='slot16'"><slot name="slot16"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot17" :key="i" v-else-if="s=='slot17'"><slot name="slot17"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot18" :key="i" v-else-if="s=='slot18'"><slot name="slot18"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot19" :key="i" v-else-if="s=='slot19'"><slot name="slot19"></slot></view>
                    	 <view :class="[model.theme.slot.class]" :style="model.theme.slot.style" slot="slot20" :key="i" v-else-if="s=='slot20'"><slot name="slot20"></slot></view>
                    	 <view :slot="s" :key="i" v-else-if="s"><slot :name="s"></slot></view>
                    </template>
                    <!-- #endif -->
                                		
            	</wy-form-group-easy>
            </view>
        </wy-form>
        <slot></slot>
        <view  :class="model.theme.submit.class" v-if="(autoInit||inited )&& ((model.reset&&model.reset.show&&model.reset.fixed)||(model.submit&&model.submit.show&&model.submit.fixed))&&formMode!='view'">
        	<view  class="wy-form-btn wy-color-inverse wy-size-base"></view>
        </view>
        <view v-if="formMode!='view'" class="wy-flex-row wy-full-width" :class="[(model.reset&&model.reset.show&&model.reset.fixed)||(model.submit&&model.submit.show&&model.submit.fixed)?'wy-form-easy-postion-fixed wy-bg-inverse':'']">
            <view class="wy-flex-1" v-if="(autoInit||inited) && model.reset&&model.reset.show&&formMode!='view'"  :class="[model.theme.reset.class]" :style="model.theme.reset.style" >
            	<slot name="btnReset">
            		<button v-if="model.reset&&model.reset.show&&formMode!='view'" :disabled="model.reset.disabled || !actionInited" hover-class="wy-bg-hover" class="wy-form-btn wy-size-base wy-bg-grey" @click="reset">
            			<text class="wy-color-inverse wy-size-base">{{model.reset.title}}</text> 
            		</button>
            	</slot>
            </view>
            <view class="wy-flex-1" v-if="(autoInit||inited) && model.submit&&model.submit.show&&formMode!='view'"  :class="[model.theme.submit.class]" :style="model.theme.submit.style" >
            	<slot name="btnSubmit">
            		<button v-if="model.submit&&model.submit.show&&formMode!='view'" :disabled="model.submit.disabled || !actionInited" hover-class="wy-bg-hover" class="wy-form-btn  wy-size-base wy-bg-primary" @click="_submit">
            			<text  class="wy-color-inverse wy-size-base">{{model.submit.title}}</text> 
            		</button>
            	</slot>
            </view>
			<view v-else class="wy-flex-1" :class="[model.theme.submit.class]" :style="model.theme.submit.style">
				 <slot name="btn"></slot>
			</view>
        </view>
        <wy-modal ref="wyModal"></wy-modal>
    </view>
</template>

<script>
   import {wyFormEasy} from '../../libs/form.js';
   import {wyProps} from '../../libs/props.js';
   export default { 
        name:'wy-form-easy',
        mixins: [wyProps,wyFormEasy]
   }
</script>

<style >

</style>
